﻿<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模块化</title>
<link href="/resources/Doc/css/style.css" rel="stylesheet" />
<link href="/resources/Doc/lib/responsive.css" rel="stylesheet" />
<!--[if lt IE 9]><script src="/resources/Doc/lib/H5shiv.js"></script><![endif]-->
</head>
<body class="hasNav">
<header class="wrap">
   <h1>模块化框架使用文档</h1>
</header>
<nav class="wrap nav" id="nav"></nav>
<section class="wrap" id="overall">
   <h2>概述</h2>
   <h3 id="overall-about">关于框架</h3>
   <p> 框架旨在模块化js开发，使用 <a href="http://seajs.org/docs/" target="_blank">Seajs</a> 作为模块加载器，模块库封装了大部分web开发常用模块，支持基于同一模块库的多个独立子项目，并且子项目内部的目录结构没有限制，但是js文件夹的位置需要在seajs.config中正确配置。</p>
   <h3 id="overall-files">目录结构</h3>
   <pre>
      <code class="javascript">
  Doc/							//文档
  modules/						//模块库
  icon/							//图标库
  grid/							//栅格(12-24)
  web/							//模板项目
    |-- app/
    |-- css/
    |-- img/
    |-- lib/
    |-- index.htm
    `-- seajs.config.js
      </code>
   </pre>
   <h3 id="overall-start">开发环境</h3>
   <h4>配置IIS</h4>
   <p>安装IIS后新建站点，填写名称、网站文件地址、端口号(建议以端口号为名称建立3-5个站点复用)。IIS服务器需要统一做以下设置：</p>
   <ol>
      <li>开启目录浏览</li>
      <li>默认文档增加 index.htm</li>
      <li>MIME类型增加MIME类型 json:application/json, woff:application/x-font-woff</li>
      <li>设置http重定向/resources/web/(结合实际项目)</li>
   </ol>
   <h4>配置dreamweaver</h4>
   <p>建立dreamweaver站点，打开服务器选项卡，名称自定义，本地/网络方式，路径选择当前站点目录，url填IIS中绑定的访问地址。</p>
	<h4>配置项目js文件夹位置</h4>
   <p>以默认框架目录结构为例，示例项目的js文件夹位置是/web/app，文档项目的js文件夹位置是/resources/Doc/resets，因此seajs.config的配置为如下：</p>
   <pre>
   	<code>
// seajs.config

seajs.config({
	alias: {
		'jquery' : 'jquery/1.11.0/jquery.min.js',
		'validform' : 'validform/validform'
	},
	paths: {
		'app' : '/resources/web/app' 
  }

})
      </code>
   </pre>
   <h3 id="standard">开发规范</h3>
	<p>另见<a href="rule.htm" target="_blank">模块化框架开发文档</a></p>
</section>
<section class="wrap" id="js">
   <h2>模块化</h2>
   <h3 id="js-seajs">Js三层结构</h3>
   <p>网站的所有脚本可以分为 <strong>base</strong> + <strong>module</strong> + <strong>app</strong> 三层，base层是对原生js的封装，提供更易于使用的语法和(dom，ajax，cookie)工具，也就是常用的jquery，框架中除了jquery还增加了base.js提供jquery不具备的功能，都放在modules/文件夹下保存；module层是基于base层实现或独立实现的功能封装，如轮显效果、视频播放器，日期选择器，表单验证器等，包括了绝大部分建站常用效果，是modules/文件夹的重要组成部分；app层是基于base和modules实现的具体页面效果，写在每个页面独有的js文件中，放在app/文件夹，通常还有一个common.js放置全站通用的脚本。 </p>
   <pre>
         <code>
/**
 * index.htm页底部引用的Seajs和首页入口文件
 */
&lt;script src=&quot;/resources/modules/seajs/sea.js&quot; id=&quot;seanode&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/resources/web/seajs.config.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
   seajs.use('app/index.js')
&lt;/script&gt;

         </code>
      </pre>
   <p> <a href="https://github.com/seajs/seajs/issues/547" target="_blank">前端模块化开发的价值</a> <a href="https://github.com/seajs/seajs/issues/266" target="_blank">SeajsAPI快速参考</a> </p>
   <h3 id="js-app">app层</h3>
   <h4>如何使用已经封装的模块</h4>
   <p>使用模块的语法是require(‘模块路径’)，或者异步加载require.async(‘模块路径’，回调函数)。</p>
   <p>以index.js为例：</p>
   <pre>
   	<code>
/*
 * index.js
 */
define(function(require, exports, module) {
   var $ = require('jquery');
   var base=require('base');
   require('./common');
   //...
   
})
      </code>
   </pre>
   <p>第一行和最后一行是cmd标准模块包装，require、 exports、 module是固定写法不得改名，分别提供加载其他模块、对外暴露接口、对外暴露整个模块的功能；</p>
   <pre>
   	<code>
define(function(require, exports, module) {
   ...
})
      </code>
   </pre>
   <p> 第二行加载了jQuery，require('jquery')将加载jquery并返回jquery提供的所有方法，将这句直接赋值给$就实现了jquery的引入，完整的语句是var $ = require('jquery');变量名可以自定义，因此也可以写做 lalala = require('jquery'); lalala('body').append('hello');由于在seajs.config.js中对jquery.js和base.js配置了alias变量，所以可以直接require('jquery')而不必require('jquery/jquery.js')。 </p>
   <pre>
   	<code>
   var $ = require('jquery');
      </code>
   </pre>
   <p> 第三行加载base.js，当加载的文件是js格式时可以省略扩展名，因此require('base.js')可以简写为require('base')。base.js提供的方法见 <a href="#js-base">【base层】</a>和<a href="#respons">响应式功能</a> 。 </p>
   <pre>
   	<code>
   var base=require('base');
      </code>
   </pre>
   <p> 第四行加载了common模块，common.js是页面公用js，像导航效果、返回顶部等。 </p>
   <pre>
   	<code>
   require('./common');
      </code>
   </pre>
   <p> 除非特殊情况，每一个app层js都会加载以上三个模块，为页面提供基础工具集并组织整站公用js。 </p>
   <h4>异步加载</h4>
   <p> 以上模块全部用require加载，另一种加载方式require.async是异步加载，跟require的区别在于require.async请求的模块不会马上加载，只有需要用到的时候加载器才会开始加载，对于jquery和common之类被其他代码依赖的模块我们希望尽快加载生效，因此使用同步加载，对于大多数插件类效果类模块则应使用异步加载，从而避开页面打开瞬间的加载高峰期，提高页面性能，但具体情况可以具体分析，比如可以对第一屏内的效果模块使用同步加载提高第一屏的响应速度。require.async接受一个回调函数做为第二个参数，如果模块有返回值该回调函数还将接受该值为参数，以百度分享效果为例，异步请求该模块后回调函数中接收了该模块返回的方法，并自定义名称为bdshare，然后在函数体内使用bdshare方法： </p>
   <pre>
      <code>
   //百度分享 
   require.async('bdshare',function(bdshare){
      bdshare({
         bdSize : 16
      });
   });
      </code>
   </pre>
   <h3 id="js-module">module层</h3>
   <p> module层封装了常用js模块，是框架的最主要组成部分，随着模块的丰富和完善module层将逐渐趋于稳定，开发中不应该改动模块，发现bug或新需求应统一更改后重新纳入框架，并通知bug修复情况或新增的api。模块封装相关文档参见 <a href="https://github.com/seajs/seajs/issues/242" target="_blank">CMD模块定义规范</a> </p>
   <h4>模块目录</h4>
   <nav id="modules_index"></nav>
   <h4>使用示例</h4>
   <table class="table table-bordered" id="modules_list">
   	<tr id="hook(下拉刷新)">
      	<td>hook</td>
      	<td>
        <p>触摸屏下拉刷新效果</p>
         <pre>
         	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;
   滚动内容&lt;br/&gt;
   滚动内容&lt;br/&gt;
   滚动内容&lt;br/&gt;
   滚动内容&lt;br/&gt;
   滚动内容&lt;br/&gt;
&lt;/div&gt;         
			 </code>
      </pre>
      <pre>
         	<code>
//js及所有默认参数：
require('hook/hook');

$('.demo').hook({
   callback:null  //自定义回调，不定义默认刷新页面
});
            </code>
         </pre>
         </td>
      </tr>
      <tr id="DatePicker">
         <td>My97DatePicker</td>
         <td>
         	<p>日期选择器，返回日期选择器方法：详细文档见：<a href="http://www.my97.net/dp/demo/index.htm" target="_blank">官网</a></p>
            <pre>
            <code>
//js
var datepicker=require('My97DatePicker/WdatePicker');
$('#zd_birthday').on('click',function(){
   datepicker()
})
            </code>
         </pre>
         </td>
      </tr>
      <tr id="album(相册)">
      	<td>album</td>
        <td>
        	<p>相册插件，依赖幻灯片模块(slide.js)。</p>
            <p>&lt;li&gt;标签内部结构不限，但是必须存在 &lt;img&gt;标签，如果存在"._title"，其文内容字会被抓取为标题。</p>
            <pre>
            	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;img src=&quot;img/temp/case.jpg&quot; alt=&quot;&quot; &gt;
            &lt;div class=&quot;_title&quot;&gt;这行字会成为标题&lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src=&quot;img/temp/case.jpg&quot; alt=&quot;&quot; &gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src=&quot;img/temp/case.jpg&quot; alt=&quot;&quot; &gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src=&quot;img/temp/case.jpg&quot; alt=&quot;&quot; &gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src=&quot;img/temp/case.jpg&quot; alt=&quot;&quot; &gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
				  </code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
require.async('album/album',function(){
   $('.demo').album({
      wrap: 'ul', 
      cell: 'li', 
      trigger:null,            // 触发元素，默认无，将用cell的点击事件触发播放，可传入cell的子元素置
      type: 1,                 // 相册模式，可选 1:带箭头和关闭 |  2:带预览和关闭和页码
      effect: 'slide',         // 切换效果，可选 slide | fade | toggle
      speed: 480,
      imgsrc:null              //大图地址，img标签属性名
   })	
})
                </code>
            </pre>
            
        </td>
      </tr>
      <tr id="audioplayer">
      	<td>audio</td>
         <td>
         <p>音频播放器统一UI库</p>
         	<pre>
            	<code>
&lt;!--html--&gt;
&lt;audio preload=&quot;auto&quot; autoplay=&quot;1&quot;&gt;
   &lt;source src=&quot;/resources/test/ghsy.mp3&quot; /&gt;
&lt;/audio&gt;
			 	 </code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
require('audio')
$( 'audio' ).audioPlayer();

            	</code>
            </pre>
         </td>
      </tr>
      <tr id="bdshare(百度分享)">
         <td>bdshare</td>
         <td>
         <p>百度分享,参数是标准的百度分享参数数组，允许对多组分享通过data-tag标记做不同的配置，当只有一组时可以直接传入json格式，或者不传参使用默认值</p>
            <pre>
               <code>
   //常规使用
   require.async('bdshare',function(bdshare){
    bdshare({
      bdSize : 16
      });
    });
				  </code>
        </pre>
        <pre>
                <code>
   &lt;!-- 如果页面内有多组分享 --&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_1&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
   &lt;div class=&quot;bdsharebuttonbox&quot; data-tag=&quot;share_2&quot;&gt;
      &lt;a class=&quot;bds_mshare&quot; data-cmd=&quot;mshare&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_qzone&quot; data-cmd=&quot;qzone&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tsina&quot; data-cmd=&quot;tsina&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_baidu&quot; data-cmd=&quot;baidu&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_renren&quot; data-cmd=&quot;renren&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_tqq&quot; data-cmd=&quot;tqq&quot;&gt;&lt;/a&gt;
      &lt;a class=&quot;bds_more&quot; data-cmd=&quot;more&quot;&gt;更多&lt;/a&gt;
      &lt;a class=&quot;bds_count&quot; data-cmd=&quot;count&quot;&gt;&lt;/a&gt;
   &lt;/div&gt;
				  </code>
        </pre>
        <pre>
                <code>
   //多组分享js         
   require.async('bdshare',function(bdshare){
       bdshare([{
            bdText : 'test',  //分享的内容
            bdDesc :'dest',   //分享的摘要
            bdUrl : '',       //分享的Url地址
            tag : 'share_1',  //表将只会应用于data-tag值为share_1的分享按钮，不设置tag将应用于所有分享按钮。
            bdSize : 16,      //图标尺寸, 16｜24｜32
            bdStyle : '',     //图标类型, 0｜1｜2
            bdMini : ''       //下拉分享列数，1｜2｜3
         },
         {
            tag : 'share_2',
            bdSize : 32
         }])
   });
   
               </code>
            </pre>
         </td>
      </tr>
      <tr id="box(弹窗)">
         <td>box</td>
         <td> 
         <p>弹窗插件，具有弹出($.box)、提醒($.box.alert)、询问($.box.confirm)、加载页面($.box.ajax)、加载iframe($.box.ifram)功能，可附加样式表。</p>
         <p>视频播放示例见"/web/app/videolist.js"</p>
            <pre>
                <code>
    //js及所有默认参数：
    require('box');
    var boxOption = {
       title: "对话框",   //对话框标题
       shut: "×",        //关闭
       index: 99,        //弹出层级
       opacity: 0.5,     //幕布透明度
       width: "auto",    //弹窗宽度
       height: "auto",   //弹窗高度
       bar: true,        //是否显示标题栏
       bg: true,         //是否显示半透明背景
       btnclose: true,   //是否显示关闭按钮
       fix: true,        //是否弹出框固定在页面上
       bgclose: true,    //是否点击半透明背景隐藏弹出框
       drag: false,      //是否可拖拽
       protect: "auto",  //保护装载的内容
       onshow: $.noop,   //弹窗显示后触发事件
       onclose: $.noop,  //弹窗关闭后触发事件
       delay: 0,         //弹窗打开后关闭的时间, 0和负值不触发
       style:'',         //扩展样式表路径(完整路径)
       lang: 0           //语言选择，0：中文 1：英文
    }

    //弹出
    $.box( $('.demo'), boxOption );

    //提醒(有一个确定按钮)
    $.box.alert('hello box!',function(){
    	//回调
    }, boxOption);

    //询问(有确定和取消按钮)
    $.box.confirm('hello box!', function(){
    	//确定回调
    }, function(){
    	//取消回调
    }, boxOption)

    //Ajax
    $.box.ajax('/test/ajax_rand.htm', { 
      param: "param1" //Ajax参数
    }, boxOption)

    //ifram
    $.box.ifram('http://baidu.com',{
      name: "baidu",  //ifram名，默认空
      width: 640,     //iframe宽，默认640
      height: 480     //iframe高，默认480
    }, boxOption)
            </code>
         </pre>
         </td>
      </tr>
      <tr id="cons(匀速滚动)">
         <td>cons</td>
         <td>
         <p>匀速滚动，容器和li的高度/宽度必须明确指定</p>
            <pre>
            	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;
    &lt;ul&gt;
   	&lt;li&gt;content1&lt;/li&gt;
   	&lt;li&gt;content2&lt;/li&gt;
   	&lt;li&gt;content3&lt;/li&gt;
   	&lt;li&gt;content4&lt;/li&gt;
   	&lt;li&gt;content5&lt;/li&gt;
   	&lt;li&gt;content6&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
				  </code>
        </pre>
        <pre>
                <code>
/*css*/
.demo{width:300px;height:100px;}
.demo li{width:290px;height:90px;background:#eee;margin:0 10px 10px 0;}
				</code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
require.async('cons',function(){
   $('.demo').conScroll({
      speed: 1,
      dir: true , //true横向 false竖向
      prev:'',    //指定向左按钮，jquery选择器格式，不指定默认添加a.arr_prev
      next:''     //指定向右按钮，jquery选择器格式，不指定默认添加a.arr_next
   });
});
               </code>
            </pre>
         </td>
      </tr>
      <tr id="countdown(倒计时)">
        <td>倒计时</td>
        <td>
          <p>倒计时插件，返回倒计时方法，接受原生对象为第一个参数，用于显示倒计时text，可自定义显示格式。</p>
          <pre>
            <code>
  &lt;!-- html --&gt;
  &lt;div class=&quot;demo&quot;&gt;&lt;/div&gt;
            </code>
            <code>
 //js及所有默认参数：
 require.async('countdown',function(cd){
    cd($('.demo').get(0),{
      begin: new Date(2014,11,03,11,58,00),       // 开始时间，可选，默认本地时间
      date: new Date(2089,01,05,02,25,00),        // 结束时间，默认 2089-02-05 02:25:00
      refresh: 1000,                              // 刷新率，默认每秒刷新
      offset: 0,                                  // 偏移量，用于纠正时区偏差
      onEnd: function() {},                       // 结束回调，默认空函数
      render: function(date) {                    // 显示方式，默认字符串
        this.innerHTML = date.years + " 年, " +
          date.days + " 天, " +
          this.leadingZeros(date.hours) + " 时, " +
          this.leadingZeros(date.min) + " 分 " +
          this.leadingZeros(date.sec) + " 秒";
        }
      })
  })
            </code>
          </pre>
        </td>
      </tr>
      <tr id="drag(拖拽)">
      	<td>drag</td>
      	<td>
         <p>拖拽插件，拖拽元素大于拖拽范围或者小于拖拽范围都可以，两种情况都支持边缘检测</p>
         <pre>
            <code>
  &lt;!--html--&gt;
  &lt;div class=&quot;drag&quot; style=&quot;width:100px;height:100px;background:#434343;&quot;&gt;&lt;/div&gt;
            </code>
            </pre>
            <pre>
            <code>
  //js及所有默认参数：
  require('drag');
  $('.drag').drag({
    wrap:null,               //指定拖拽范围，默认选择父元素
    overflow:false,           //是否允许超出边缘，默认不允许
    callback:function(ele){      //回调，接受拖拽元素为参数
      // do something whit ele
    }
  })
            </code>
         </pre>
         </td>
      </tr>
      <tr id="ejs(模板引擎)">
         <td>ejs模板引擎</td>
         <td>
         <p>项目主页：https://code.google.com/p/embeddedjavascript/</p>
            <pre>
               	<code>
  var ejs=require('ejs');
  $.getJSON("/data.json",function(data){
      var _menu=new ejs({url: '/Template/view/menu'}).render(data);
      $('#menu').html(_menu);
  });

                  </code>
               </pre>
         </td>
      </tr>
      <tr id="img-loaded(图片加载完成检测)">
      	<td>img-loaded</td>
         <td>
         	<p>对区域内图片做加载完成检测</p>
            <pre>
            	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/442/548/?582&quot; &gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/405/406/?324&quot; &gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://lorempixel.com/374/330/?734&quot; &gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
require('img-loaded');
$('.demo').imagesLoaded(function(){
   alert('加载完成');
   //do something...	
})


            	</code>
            </pre>
         </td>
      </tr>
      <tr id="img-auto(图片双向居中)">
         <td>img-auto</td>
         <td>
           <p>图片上下左右居中，依赖img-ready</p>
           <pre>
             <code>
&lt;style&gt;
.demo{width: 150px;height: 150px;border:1px solid #ccc;}
&lt;/style&gt;
&lt;div class=&quot;demo&quot;&gt;
  &lt;img src=&quot;http://usr.im/100x100&quot;&gt;
&lt;/div&gt;
             </code>
             <code>
// JS及默认参数
require('img-auto')
$('.demo').imgAuto(function(){
  //callback
})
             </code>
           </pre>
         </td>
      </tr>
      <tr id="img-ready">
         <td>img-ready</td>
         <td>
           <p>能在图片下载完成之前检测到图片真实尺寸，返回方法imgReady(src,readyCall,loadCall)，接受三个参数分别是图片src、检测完成回调，下载完成回调</p>
           <pre>
             <code>
  &lt;!-- html --&gt;
  &lt;img id=&quot;hugeimg&quot; src=&quot;http://usr.im/400x200&quot;&gt;
             </code>
             </pre>
             <pre>
             <code>
  var ready = require('img-ready');
  var demo = $('#hugeimg');

  ready(demo.attr('src'), 
    function(width,height){
      // img ready，此时已经获取到width和height

    }, function(width,height){
      // img loaded

    }
  )
             </code>
           </pre>
         </td>
      </tr>
      <tr id="jQueryForm">
      	<td>jQueryForm</td>
         <td>
         <p>封装jQueryForm.js</p>
         <p>官方文档打不开了，看<a href="http://blog.csdn.net/zzq58157383/article/details/7718956" target="_blank">这个也行</a></p>
         </td>
      </tr>
      <tr id="json">
      	<td>json</td>
			<td>
         封装jquery.json-2.4
         <pre>
         	<code>
require('json');

var thing = { plugin: 'jquery-json', version: 2.4 };

var encoded = $.toJSON( thing );
// '{"plugin":"jquery-json","version":2.4}'

var name = $.evalJSON( encoded ).plugin;
// "jquery-json"

var version = $.evalJSON(encoded).version;
// 2.4

            </code>
         </pre>
         </td>
      </tr>
      <tr id="lazyload(图片懒加载)">
         <td>lazyload</td>
         <td>
         <p>图片懒加载，元素内的懒加载图片用"data-lazy"属性存贮真实图片地址：</p>
         <pre>
         	<code>
&lt;style&gt;
.demo{height: 600px;}
&lt;/style&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/800x600&quot; &gt;&lt;/p&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/801x600&quot; &gt;&lt;/p&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/802x600&quot; &gt;&lt;/p&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/803x600&quot; &gt;&lt;/p&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/804x600&quot; &gt;&lt;/p&gt;
&lt;p class=&quot;demo&quot;&gt;&lt;img src=&quot;img/black.2.png&quot; data-lazy=&quot;http://usr.im/805x600&quot; &gt;&lt;/p&gt;
				</code>
        <code>
//js及所有默认参数：
require('lazyload');
$('window').lazyload({       //也可以是普通元素如$('.demo').lazyload()
   effect: "show",         // show , fadeIn 
   firstCount: 1,          //第一次加载数量
   everyCount: 1,          //以后每次加载数量
   distance: 100           //开始加载距离(将加载图片与视野底部的距离)
})
            </code>
         </pre>
         </td>
      </tr>
      <tr id="masonry2(瀑布流)">
      	<td>masonry2</td>
         <td>
         <p>瀑布流插件，封装自masonry2，官网：http://masonry.desandro.com/</p>
         <pre>
         	<code>
   &lt;!--html--&gt;
   &lt;ul id=&quot;container&quot;&gt;
      &lt;li class=&quot;item&quot;&gt;...&lt;/li&gt;
      &lt;li class=&quot;item&quot;&gt;...&lt;/li&gt;
      &lt;li class=&quot;item&quot;&gt;...&lt;/li&gt;
      ...
   &lt;/ul&gt;    
				</code>
        </pre>
        <pre>
                <code>
   /*css*/
   .item { width: 25%; }
				</code>
        </pre>
        <pre>
                <code>
   //js
   
   //加载模块
	require('masonry2');
   //定义变量
	var $container = $('#container'),  sTimer;
   //应用瀑布流
	$container.masonry({
		itemSelector: '.item'
	});
   //滚动加载
	var win=$(window);
	win.scroll(function scrollHandler(){
		 clearTimeout(sTimer);
		 sTimer = setTimeout(function() {
			  if(win.loaded == 1){win.unbind("scroll", scrollHandler);}
			  var t=win.scrollTop(),
            h=win.height(),
            t1= $container.offset().top, 
            h1 =$container.outerHeight(true) ;
			  
			  if(t+h >= t1+h1){
				  addItem(3)
			  }
		 }, 100);
	});
   
	//模拟动态加载数据
	function addItem(n) {
		var fragment =  '&lt;li class=&quot;item&quot;&gt;test&lt;li&gt;';
		for ( var i = 0; i < n; i++ ) {
			fragment+=fragment;
		};
		$container.append($(fragment)).masonry("reload");	
	};
            </code>
         </pre>
         </td>
      </tr>
      <tr id="mousetrap(按键监听)">
         <td>mousetrap</td>
         <td>
         <p>按键监听</p>
            <pre>
               	<code>
//js
require.async('mousetrap',function(){
   // 单按键
    Mousetrap.bind('4', function() { console.log('4'); });
    Mousetrap.bind(&quot;?&quot;, function() { console.log('show shortcuts!'); });
    Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup');
   
    // 功能键
    Mousetrap.bind('command+shift+k', function() { console.log('command shift k'); });

    // 多组按键绑定相同事件
    Mousetrap.bind(['command+k', 'ctrl+k'], function() {
        console.log('command k or control k');

        // return false取消系统默认事件
        return false;
    });
   
    // 组合键
    Mousetrap.bind('up up down down left right left right b a enter', function() {
        console.log('konami code');
    });
});
                  
                  </code>
               </pre>
         </td>
      </tr>
      <tr id="mousewheel(滚轮监听)">
      	<td>mousewheel</td>
      	<td>
        	<p>鼠标滚轮监听，回调函数的event包含三个属性：deltaX，deltaY，deltaFactor；分别代表横向滚动方向，纵向滚动方向，滚动长度(不同浏览器下该值不一致)</p>
        	<pre>
            	<code class="javascript">
  //js
  
  require('mousewheel')
  //开始监听
  $('#demo').on('mousewheel', function(event) {
      console.log(event.deltaX, event.deltaY, event.deltaFactor);
  });
  //停止监听
  setTimeout(function(){
      $('#demo').unmousewheel()
  },2000)
                </code>
            </pre>
        </td>
      </tr>
      <tr id="on-scroll(滚动监听)">
        <td>on-scroll</td>
        <td>
          <p>监听页面滚动并操作出现在视野中的元素，可用于长页面滚动时做异步加载。</p>
          <p>当指定target时，target元素的li子元素将与效果元素一一对应，与当前元素对应的target>li将添加"active"类，当target滚出视野时将添加"fixed"类，用于样式控制屏幕定位或其他效果。</p>
          <pre>
            <code>
&lt!-- html --&gt
&lt;style&gt;
.demo_Target{width:980px;margin:0 auto;overflow: hidden;*zoom:1;background:#fff;border-left:1px solid #eee;}
.demo_Target li{float: left;height: 40px;line-height: 40px;border:1px solid #eee;margin-left:-1px;width: 33%;text-align: center;cursor: pointer;}
.demo_Target.fixed{position: fixed;left: 50%;margin-left: -490px;top:0;z-index: 99;}
.demo_Target .active{color:red;background:#eee;}
.demo_sections{width:978px;border:1px solid #ccc;padding:2em 0;margin:2em auto;
height: 800px;}
&lt;/style&gt;

&lt;p&gt;header&lt;br/&gt;header&lt;br/&gt;header&lt;br/&gt;header&lt;br/&gt;header&lt;br/&gt;header&lt;br/&gt;header&lt;br/&gt;&lt;/p&gt;
&lt;ul class=&quot;demo_Target&quot;&gt;
  &lt;li&gt;channel01&lt;/li&gt;
  &lt;li&gt;channel02&lt;/li&gt;
  &lt;li&gt;channel03&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;demo_sections&quot;&gt;
  anything...1
&lt;/div&gt;
&lt;div class=&quot;demo_sections&quot;&gt;
  anything...2
&lt;/div&gt;
&lt;div class=&quot;demo_sections&quot;&gt;
  anything...3
&lt;/div&gt;
            </code>
            <code>
// js 参数说明
require('on-scroll');
$('.demo_sections').onScroll({
  offset:42,                  // 可选，计算偏移量，默认0
  target:'.demo_Target',      // 可选，绑定目标，jquery选择器格式，必须是ul>li结构，默认无
  speed:256,                  // 可选，滚动动画时间，默认256ms
  adsorb:false,               // 可选，是否滚动吸附，默认false
  onshow:function(ele){       // 可选，元素第一次出现在视野时触发，默认无
    // do something with $(ele)
  }  
})

            </code>
          </pre>
        </td>
      </tr>
      <tr id="mmenu(移动导航)">
         <td>mmenu</td>
         <td> 
         <p>移动版导航插件，导航必须具有id属性，与导航控制按钮的href属性相同。</p>
         <p>注：为避免插件加载期间导航错乱闪现，可以先给导航加 class="hide" 或在其他样式中加display:none 先隐藏掉，插件运行后会去掉原样式，不影响最终效果。</p>
            <pre>
               <code>
&lt;nav class=&quot;demo hide&quot; id=&quot;menu&quot;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;/1&quot;&gt;导航&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;/2&quot;&gt;导航2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;/3&quot;&gt;导航3&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;/4&quot;&gt;导航4&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;/#2&quot;&gt;二级&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
   &lt;/ul&gt;
&lt;/nav&gt;
&lt;a href=&quot;#menu&quot; class=&quot;mobile_key&quot;&gt;导航控制按钮&lt;/a&gt;  &lt;!--导航控制按钮--&gt;
				</code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
if(base.getType()=="Mobile"){
   require('mmenu');
   $('.demo').mmenu({
      position			: 'left',		//菜单位置，默认左侧 left || top || right || bottom
      zposition			: 'front',		//菜单层次，默认上层，front || next
      slidingSubmenus	: true,			//菜单展开方向，默认横向，true || false
      classes			: ''			//主题class, mm-light || mm-white || mm-black
   });
}
               </code>
            </pre>
         </td>
      </tr>
      <tr id="mousemenu(右键菜单)">
        <td>mousemenu</td>
        <td>
        <p>自定义鼠标右键，支持菜单内分组，调用格式为 $('.demo').mousemenu( data, option ) </p>
        <pre>
          <code>
  require('mousemenu');
  $('html,body').height('100%');
  $('body').mousemenu(
      [
          [{
              text: "组1-1",
              func: function() {

              }
          }, {
              text: "组1-2",
              func: function() {

              }
          }],
          [{
              text: "组2-1",
              func: function() {

              }
          }, {
              text: "组2-2",
              func: function() {

              }
          }]
      ], {
          name: "",                   // 菜单名，将作为菜单id的后缀，用以区别多组菜单，只有一组时可省略
          offsetX: 2,                 // 菜单左上角距点击位置横向距离
          offsetY: 2,                 // 菜单左上角距点击位置纵向距离
          textLimit: 6,               // 菜单项显示文字个数，超出显示省略号
          beforeShow: function() {},  // 菜单显示前执行
          afterShow: function() {},   // 菜单显示后执行
          break: function() {}        // 中断方法，用于点击时做条件判断，返回真值将阻止本次弹出
      }
  );
          </code>
        </pre>
        </td>
      </tr>
      <tr id="photowall(等高图片墙)">
         <td>photowall</td>
         <td>
         <p>类似百度图片搜索结果页的等高图片墙效果</p>
            <pre>
               	<code>
&lt;!-- html --&gt;
&lt;div class=&quot;imgList&quot;&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/1.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/2.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/3.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/4.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/5.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/1.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/2.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
   &lt;div class=&quot;imgItem&quot;&gt; &lt;a href=&quot;&quot;&gt; &lt;img src=&quot;http://bcs.duapp.com/images-link/3.jpg&quot; &gt; &lt;/a&gt; &lt;/div&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
/* css */
.imgList .imgItem ,.imgList .imgItem a img { display: inline-block; *display: inline;
zoom: 1; vertical-align: top; overflow: hidden; }
				</code>
                <code>
//js及所有默认参数：
require.async('photowall',function(photowall){
   photowall({
      this:'.imgList',    //图片列表容器
      items:'.imgItem',   //图片单元
      border:10           //间距，默认10px
      })
   })
                  </code>
               </pre>
         </td>
      </tr>
      <tr id="PJAX">
         <td>PJAX</td>
         <td>
         <p>pjax插件，需要在seajs.config.js中配置预加载，然后在页面级js中定义pjax规则</p>
            <pre>
               	<code>
// seajs.config
seajs.config({
	alias: {
		'$': 'jquery/jquery'
	},
	preload:[
		'$',
		'pjax'
	]
})

//页面js中定义pjax规则
$.pjax({
    selector: "a[target!='_blank']",
    container: '#container',      //pjax灌注容器
    show: 'show',                 //显示效果，可选show/fade
    cache: false,                 //是否缓存ajax结果
    storage: true,                //是否启用本地存储
    titleSuffix: '|标题后缀',       //标题后缀
    filter: function(){           //排除规则
       if($(this).data('nopjax')){
          return true
          }
       },
   callback: function(){          //pjax回调
      //显隐
      $('.opc0').animate({'opacity':'1'},'fast');
      //导航
      var jrChannelArr=jrChannel.split('#');
      $('.nav_list').children('li').eq(jrChannelArr[0]).addClass('cur').siblings().removeClass('cur');
      }
    }
});
                 	
                  </code>
               </pre>
         </td>
      </tr>
      <tr id="videoplayer">
         <td>videoplayer</td>
         <td> 
         <p>用于跨平台视频播放，返回播放器html。</p>
         <p>**视频文件至少需要.flv/.mp4/.webm中的一种**</p>
         <p>路径匹配规则：传入.flv后缀的文件路径会返回flv播放器，只能在PC播放；传入.mp4/.webm后缀或没有后缀的文件路径会返回跨平台播放器，此时支持H5的浏览器将播放.mp4/.webm，其他浏览器播放.flv。</p>
            <pre>
               	<code>
//js
var player=require('player');

//得到播放器html
var player_html = player({
   src: '/Static/demo.flv',		//视频文件
   w: 480,						//宽
   h: 320,						//高
   auto: false					//是否自动播放
   ctrl:true					//是否有播放控件
})

/*
当其他配置都保持默认时，也可以直接传入视频地址
var player_html = player('/Static/demo.flv')
*/

//将播放器插入页面
$('.playarea').html(player_html)

                  </code>
               </pre>
         </td>
      </tr>
      <tr id="player4youku">
         <td>player4youku</td>
         <td>
         <p>优酷播放器，返回播放器dom，使用方法类似flvPlayer，@param (youkuID,width,height)：优酷视频id，宽(可选，默认480)，高(可选，默认320)</p>
          <p>与box.js配合弹出播放的示例见/web/app/videolist.js</p>
            <pre>
            <code>
require.async('player4youku',function(ykplayer){
  $('.demo').html(ykplayer(youkuID));
});

            </code>
         </pre>
        
     	 </td>
      </tr>
      <tr id="scroll-bar(自定义滚动条)">
         <td>scroll-bar</td>
         <td>
         <p>自定义滚动条，支持横向或纵向。</p>
         <p>内容元素不能有可向上传导的margin-top属性，否则会干扰效果准确性</p>
         	<pre>
            	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo demo1&quot;&gt;
   &lt;img src=&quot;http://usr.im/480x480&quot;&gt;&lt;br/&gt;
   content conten ontentcontent1&lt;br/&gt;
   content7&lt;br/&gt;
   content conten ontentcontent1&lt;br/&gt;
   content7&lt;br/&gt;
&lt;/div&gt;
&lt;div class=&quot;demo demo2&quot;&gt;
   &lt;img src=&quot;http://usr.im/900x320&quot;&gt;&lt;br/&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
/*css*/
.demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
.demo .scroll_c{background: yellow;}
.demo .scroll_c img{max-width: none;}
				</code>
                <code>
//js及所有默认参数：
require.async('scroll-bar', function() {
    $('.demo1').scrollBar({
        wrap: null,       //包裹元素，默认不指定，将新增div.scroll_c
        monitor: false,     //是否监听内容变化(用于多插件协作)，布尔值，默认false
        overflow: "y",      //滚动条方向，默认"y"(纵向)，可选"x"(横向)
        keyway: 30,       //按钮键程，默认30(px)
        width: 10,        //滚动条宽度，默认10(px)
        btnLength: 0,     //按钮长度，默认0(不显示按钮)
        btnBreadth: '100%',   //按钮宽度，默认与滚动条同宽
        sliderWidth: '100%'   //滑块宽度，默认与滚动条同宽
    });
    $('.demo2').scrollBar({
        overflow: "x"
    });
});

               </code>
            </pre>
         </td>
      </tr>
      <tr id="scroll-row(纵向滚动)">
         <td>scroll-row</td>
         <td>
         <p>垂直方向整行滚动。可以处理多列情况，默认添加内部按钮，因为效果特殊性内部按钮无法显示在效果区域以外，
         如果需要外部按钮可以指定自行添加的按钮。</p>
         <pre>
         	<code>
&lt;style&gt;
  .demo { position: relative; width: 24em; height: 23em; overflow: hidden; }
  .demo ul{overflow: hidden;}
  .demo li{ float:left; width: 10em; height: 10em; margin:0 1.5em 1.5em 0; overflow: hidden; background:yellow; }
  .demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
  .demo .arr_prev{top:0;}
  .demo .arr_next{top:2em;}
&lt;/style&gt;
&lt;div class=&quot;demo&quot;&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/300x300&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/400x400&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/500x500&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/300x300&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/400x400&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/500x500&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/300x300&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/400x400&quot; /&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
				</code>
        <code>
//js及所有默认参数：
require.async('scroll-row',function(){
  $('.demo').scrollrow({
     up: null,                // 指定向上箭头，默认无，将添加 '.arrs .arr_prev'
     down: null,              // 指定向下箭头，默认无，将添加 '.arrs .arr_next'
     wrap: "ul",              // 指定包裹元素
     cell: "li",              // 指定列表元素
     line: 1,                 // 滚动行数
     speed: 500,              // 滚动速度，越大越慢
     auto: true,              // 自动滚动
     time: 5e3,               // 自动滚动间隔
     callback: function(a){}, // 滚动回调，@param (nowRow) :当前所在页数
     ext: function(b){}       // 扩展方法，@param (totalRow) :总页数
  })
});
            </code>
         </pre>
         </td>
      </tr>
      <tr id="scroll(横向滚动)">
         <td>scroll</td>
         <td>
         <p>横向滚动，支持响应式; 需指定滚动元素(.demo li)宽度，高度至少指定效果元素(.demo)或滚动元素(.demo li)其中一个。</p>
         <p><u>内置hero模式</u>，用于全屏轮显焦点图，三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度)，.demo li普通banner宽度(如980px)</p>
         <p><u>内置unloop模式</u>，不循环滚动，用于做大事记类的时间轴滚动</p>
         <p>****注意：效果通过滚动个数计算间距(margin-right)，不需要再设置间距样式。</p>
            <pre>
              	<code>
&lt;div class=&quot;demo&quot;&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/300x300&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/400x400&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/500x500&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/300x300&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/400x400&quot; /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src=&quot;http://usr.im/500x500&quot; /&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
/*css*/
.demo {width:32em;}
.demo li {width:10em; background:yellow;}
.demo .arrs{position: absolute; top:0; width:1.5em;height: 1.5em;background: grey;}
.demo .arr_prev{left:0;}
.demo .arr_next{right:0;}
				</code>
                <code>
//js及所有默认参数：
require.async('scroll',function(){
  $('.demo').scroll({
     direct: 'left',            // 自动播放方向，可选left | right
     mode: '',                  // 特殊模式，默认无，可选 hero(全屏三图滚动) | unloop(不循环)
     num: 99,                   // 滚动个数，默认99，即能显示几个显示几个
     auto: true,                // 自动播放
     time: 5e3,                 // 自动播放间隔
     speed: 256,                // 滚动速度
     step: 1,                   // 每次滚动个数
     wrap: 'ul',                // 指定滚动包裹元素
     cell: 'li',                // 指定滚动元素
     prev: null,                // 指定向左按钮，默认无，将添加 '.arrs .arr_prev'
     next: null,                // 指定向右按钮，默认无，将添加 '.arrs .arr_next' 
     callback: function(a){},   // 回调 @param (nowStep)
     ext: function(a,b,c){}     // 扩展 @param (this, showNumber, allStep)
  });
})

                </code>
              </pre>
         </td>
      </tr>
      <tr id="select(下拉框)">
         <td>sele</td>
         <td>
         <p>下拉选框，默认取消了下拉a标签默认事件。</p>
         <p>如果需要a标签的链接生效需要加target属性。</p>
         <p>默认样式为高度20px，向下弹出弹框，可以这样更改弹出方向：.demo ._option{top:auto;bottom:20px;...}</p>
            <pre>
               	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot; data-checked=&quot;2&quot; style=&quot;width:200px;&quot;&gt;
   &lt;div class=&quot;_val&quot;&gt;&lt;span&gt;选项组&lt;/span&gt;&lt;/div&gt;
   &lt;!-- 最佳实践：此处加hide可以避免页面加载过程中闪现 --&gt;
   &lt;div class=&quot;_option hide&quot;&gt; 
      &lt;a href=&quot;#&quot; data-val=&quot;1&quot; &gt;选项一&lt;/a&gt;
      &lt;a href=&quot;#&quot; data-val=&quot;2&quot; &gt;选项二&lt;/a&gt;
      &lt;a href=&quot;#&quot; data-val=&quot;3&quot; &gt;选项三&lt;/a&gt;
   &lt;/div&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
  require.async('sele', function() {
    $('.demo').sele({
      val: '._val',
      option: '._option',
      default: undefined,       // 显示具有该 data-val 值的项，默认undefined
      checked: undefined,       // 选中具有该 data-val 值的项并触发callback，默认undefined
      max: 50,            // 页面内select效果最大个数，z-index层级即从此开始递减
      act: "click",         // 触发下拉动作，可选 click | mouseenter
      callback: function(a, b) {  // 选中下拉a标签的回调，@param(_val, _text)
        console.log(a)
      }
    })
  })

                  </code>
               </pre>
         </td>
      </tr>
      <tr id="slide(幻灯片)">
         <td>slide</td>
         <td>
         	<p> 幻灯片效果，支持触屏操作，支持图片按需加载。</p>
          <p><u>按比例设置高度</u>，设：x = (高度/宽度)%，可以用"height:0;padding-bottom:x"的方式设置高度，如"height:0;padding-bottom:50%"，就将效果设置为宽高比2比1。</p>

            <pre>
               	<code>
&lt;div class=&quot;demo&quot;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;img src=&quot;http://usr.im/1000x300&quot; /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src=&quot;http://usr.im/1000x300&quot; /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src=&quot;http://usr.im/1000x300&quot; /&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
/*css*/
.demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:30%;}
.demo li{background: yellow;}
.demo img{width:100%; height:100%;}
.demo .slide_nav{left: 0;bottom:0;}
.demo .slide_nav a{float: left;width: 12px;height: 12px;overflow:hidden;background:#ccc;margin:6px;}
.demo .slide_nav .on{background:#666;}
				</code>
                <code>
//js及所有默认参数：
require.async('slide',function(){
  $('.demo').slide({
     wrap: 'ul',                //指定包裹元素
     cell: 'li',                //指定切换元素
     effect:'slide',            //切换效果，默认slide，可选slide\fade\toggle
     speed:500,                 //切换速度
     start:0,                   //起始帧，默认0，即从第一张开始
     auto:true,                 //自动播放
     pause:true,                //布尔值或jquery选择器，指定的jquery选择器将作为暂停按钮，暂停时添加'pause'类
     time:5e3,                  //自动播放间隔
     act:"mouseenter",          //导航按钮触发事件
     prev:null,                 //指定左箭头，默认无，自动添加'.arrs .arr_prev'
     next:null,                 //指定右箭头，默认无，自动添加'.arrs .arr_next'
     navs:null,                 //指定导航按钮，默认无，自动添加'.slide_nav'或使用$('.demo .slide_nav')
     imgattr: 'slide-src',       //按需加载图片的地址标签，注意不能与全局图片响应标签冲突(data-src)
     callback:function(a,b,c){},  //回调，@param ($this,$b_,n) : 效果元素，切换元素，当前帧序号
     ext:function(a,b,c){},       //扩展，@param ($this,$b_,count) : 效果元素，切换元素，总帧数
     reload:false               //是否重载slide，修改配置并重载slide时该值必须为true
  });	
});
                  </code>
               </pre>
         </td>
      </tr>
      <tr id="tab(选项卡)">
         <td>tab</td>
         <td>
         <p>选项卡，标签和选项卡内容可灵活选择，对结构没有限制</p>
            <pre>
            	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;

   &lt;div class=&quot;tab_b&quot;&gt; 选项卡栏预留位置 &lt;/div&gt;

   &lt;div class=&quot;tab_t&quot;&gt;选项卡一&lt;/div&gt;
   &lt;div class=&quot;tab_c&quot;&gt;
      选项卡一
   &lt;/div&gt;

   &lt;div class=&quot;tab_t&quot;&gt;选项卡二&lt;/div&gt;
   &lt;div class=&quot;tab_c&quot;&gt;
      选项卡二
   &lt;/div&gt;

&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
/*css*/
.demo .tab_c{height:200px;}
				</code>
        </pre>
        <pre>
                <code>
//js及所有默认参数：
require.async('tab',function(){
   $('.demo').tab({
      tabs: ".tab_t",     //标签，默认选择.tab_t
      conts: ".tab_c",    //内容，默认选择.tab_c
      width_auto: false,    //标签自适应宽度
      posi_auto: true,    //标签自动定位，关闭后可以样式控制
      left: 0,        //第一个标签距左起始位置
      auto:false,       //是否自动播放，默认否
      time:5e3,       //自动播放间隔，默认5s
      start:0,        //初始显示，默认第一个
      margin: 0,        //标签间距
      act: 'click',     //触发动作
      callback: function(){}, //回调方法 @param ($this,$tab_t,index) : 当前对象，标签，当前帧序号
      ext: function(){}   //扩展方法 @param ($this,$tab_t,opts) : 当前对象，标签，配置
   })
})
               </code>
            </pre>
         </td>
      </tr>
      <tr id="tip(提示框)">
         <td>tip</td>
         <td>
         <p>提示框插件，支持弹出文本，html，jQuery元素，当弹出jquery元素时候不带默认样式；</p>
         <p>格式：element.tip(tipElement,opation)：</p>
         <pre>
         	<code>
&lt;!--html--&gt;
&lt;div class=&quot;demo&quot;&gt;
	&lt;a href=&quot;#1&quot;&gt;文字链接&lt;/a&gt;
	&lt;a href=&quot;#2&quot;&gt;文字链接&lt;/a&gt;
	&lt;a href=&quot;#3&quot;&gt;文字链接&lt;/a&gt;
	&lt;a href=&quot;#4&quot;&gt;文字链接&lt;/a&gt;
&lt;/div&gt;            
            </code>
         </pre>
         <pre>
         	<code>
/*css*/
.demo a{display:inline-block;font-size:17px;background:green;color:#fff;margin:20px 100px;}
            </code>
         </pre>
         <pre>
         	<code>
//js及所有默认参数：
require('tip')
$('.demo a').each(function(i, e) {
    $(e).tip( $(e).attr('href'), {
        act: 'mouseenter',      // mouseenter | click
        place: 'left-center',   // [posi]-[posi]-[in or null]，前两项必须，表示位置，第三项表示从内部定位，可省
        title: false,       // title text | false
        hasarr: true,       // 有无箭头
        offset: 0,          // 提示框与元素间距，默认0
        callback: function($this){},// 回调方法 @param ($this) : 当前对象
        ext: function($this){}    // 扩展方法 @param ($this) : 当前对象
    })
});
            </code>
         </pre>
         </td>
      </tr>
      <tr id="touch">
         <td>touch</td>
         <td>
         <p>touch事件支持。包含jquery.event.move和jquery.swipe。</p>
         <p><u>jquery.event.move</u>项目主页：http://stephband.info/jquery.event.move/</p>
         <p>事件：movestart、move、moveend</p>
         <p>参数：</p>
         <table>
         	<tr>
            	<td>e.pageX, e.pageY ：</td>
                <td>触点的页面的坐标</td>
            </tr>
            <tr>
            	<td>e.startX, e.startY ：</td>
            	<td>移动起始点的页面坐标</td>
            </tr>
            <tr>
            	<td>e.distX, e.distY ：</td>
            	<td>与移动起始点的距离</td>
            </tr>
            <tr>
            	<td>e.deltaX, e.deltaY ：</td>
            	<td>与上次移动事件终点的距离</td>
            </tr>
            <tr>
            	<td>e.velocityX, e.velocityY ：</td>
            	<td>移动速度 像素/毫秒, 取最后几次触发的平均值</td>
            </tr>
         </table>
         <pre>
         	<code>
    //示例：
    $('.mydiv')
    .bind('move', function(e) {
      // move .mydiv horizontally
      $(this).css({ left: e.startX + e.deltaX });
    })
    .bind('moveend', function() {
      // move is complete!
    });
            </code>
         </pre>
         <p><u>jquery.swipe</u>项目主页：http://stephband.info/jquery.event.swipe/</p>
         <p>事件：swipeleft、swiperight、swipeup、swipedow</p>
         <p>参数：</p>
         <table>
         	<tr>
            	<td>e.pageX, e.pageY ：</td>
                <td>触点的页面的坐标</td>
            </tr>
            <tr>
            	<td>e.startX, e.startY ：</td>
            	<td>移动起始点的页面坐标</td>
            </tr>
            <tr>
            	<td>e.distX, e.distY ：</td>
            	<td>与移动起始点的距离</td>
            </tr>
            <tr>
            	<td>e.velocityX, e.velocityY ：</td>
            	<td>移动速度 像素/毫秒, 取最后几次触发的平均值</td>
            </tr>
         </table>
         <pre>
         	<code>
    //示例：
    var slides = jQuery('.slides'),
        i = 0;
    
    slides
    .on('swipeleft', function(e) {
      slides.eq(i + 1).addClass('active');
    })
    .on('swiperight', function(e) {
      slides.eq(i - 1).addClass('active');
    });            
            </code>
         </pre>
         </td>
      </tr>
      <tr id="upload">
      	<td>upload</td>
      	<td>
         	<p>上传模块，flash版和html5版自动切换。</p>
            <p>1,结构内必须存在原生上传控件： &lt;input type=&quot;file&quot; multiple &gt;</p>
            <p>2,dom必须带有id属性</p>
            <p>3,上传对象名为"Filedata"</p>
            <p>4,返回值必须是json或json格式字符串</p>
            <pre>
            	<code>
	&lt;!--html--&gt;
   &lt;form&gt;
      &lt;p class=&quot;demo&quot; id=&quot;upload&quot;&gt;
         &lt;input type=&quot;file&quot; multiple &gt;
      &lt;/p&gt;
      &lt;p&gt;
         &lt;button type=&quot;button&quot; class=&quot;btn-upload&quot; &gt;立即上传&lt;/button&gt;
      &lt;/p&gt;
   &lt;/form&gt;
				</code>
        </pre>
        <pre>
                <code>
   //js及所有默认参数：
   require('upload/upload')
   $(".demo").upload({
      multi    : true,                        //单次上传多个文件
      auto     : false,                       //自动上传，默认false可以多选，true选一张传一张
      button   : ".btn-upload",               //指定开始上传按钮(自动上传为false才有意义)
      width    : 120,                         //文件选择按钮宽度
      height   : 30,                          //文件选择按钮高度
      buttonText: '选择',                     //文件选择按钮文字
      type: null,                             //指定上传方式，当传入‘h5’时会强制使用h5方式上传
      fileTypeExts: "*.gif; *.jpg; *.jpeg; *.png",    //格式筛选
      queueSizeLimit: 99,                     //上传列队最大长度
      fileSizeLimit: 0,                       //上传文件大小限制
      removeCompleted: true,                   //是否上传完成即移除列队
      removeTimeout: 2,                       //上传完成移除列队等待时间(secend)
      uploader  : '/test/upload.php',         //上传地址
      onUploadSuccess : function(file, res){  //完成后回调 @param(file, res) 
        console.log(res)
      }       
   });  
                  </code>
            </pre>
            
         </td>
      </tr>
		<tr id="validform(表单验证)">
      	<td>validform</td>
         <td>
         <p>validform表单验证，jquery插件，整合密码强度验证，详见<a href="http://validform.rjboy.cn/document.html" target="_blank">官方文档</a>、<a href="http://validform.rjboy.cn/document.html#bindtype" target="_blank">内置验证规则</a></p>
   <p>"web/app/_form.js"中以注册表单为例完整演示了使用方法</p>
         </td>
      </tr>
      <tr id="qr(生成二维码)">
      	<td>qr</td>
      	<td>
         	<p>生成二维码</p>
            <pre>
            	<code>
	&lt;!--html--&gt;
	&lt;button id=&quot;qr_gen&quot; &gt;生成&lt;/button&gt;
	&lt;div id=&quot;qr_container&quot; style=&quot;margin:auto; position:relative;&quot;&gt;&lt;/div&gt;
				</code>
        </pre>
        <pre>
                <code>
	//js及所有默认参数：
	var qr=require('qr');
	var qr_coder = new qr($('#qr_container'));
   
	$('#qr_gen').click(function(){
		qr_coder.setMode(0);        //模式，0：base64；1：div模拟
		qr_coder.draw(
			"http://baidu.com",      //输入
			'H',                     //容错：H,Q,M,L
			'icon.png',              //中间小图标
			function(){              //回调函数
				
			});
	});
               </code>
            </pre>
         </td>
      </tr>
      <tr id="zoom(图片放大镜)">
         <td>zoom</td>
         <td>
         <p>图片放大镜，大图尺寸自动获取。</p>
            <pre>
              	<code>
&lt;!--html--&gt;
&lt;style&gt;
.demo{width:480px;height:320px;line-height: 320px; text-align:center;background:#eee;}
.demo img{display: inline-block;vertical-align: middle;}
&lt;/style&gt;
&lt;div class=&quot;demo&quot;&gt;
   &lt;img src=&quot;http://usr.im/320x240&quot; zoom=&quot;http://usr.im/960x720&quot; /&gt;
&lt;/div&gt;
				        </code>
                </pre>
                <pre>
                <code>
// JS及所有默认参数
require.async('zoom', function() {
    $('.demo').zoom({
    offset: 10,             // 大图距小图距离，默认10px
    offsetTarget:null,          // 定位目标，jquery选择器格式，默认无，将相对$this定位，
    position: "right",          // 大图相对小图位置，默认right
    preload: true             // 是否预加载，默认true
    })
})
                </code>
              </pre>
         </td>
      </tr>
   </table>

   <h4>模板模块</h4>
   <p>静态页模板中的js主要是ajax请求，需要固化jsp程序位置和文件名，以及在页面顶部输出请求必需的参数。</p>
   <h5>helper.js</h5>
   <p>新闻详细页模块,需要页面顶部输出jrInfo：</p>
   <pre>
      <code>
	var jrInfo={'id':'15909','table':'jrcms_information','wn':'15909','cn':'15909'}
      </code>
   </pre>
   <p>helper.js API：</p>
   <table class="table table-bordered">
      <tr>
         <td>ViewCount(jrInfo,callback(count))</td>
         <td>浏览次数加1，jrInfo必须，callback可选，将回传新的浏览次数count。</td>
      </tr>
      <tr>
         <td>getInforPN(jrInfo,callback(prev,next))</td>
         <td> 获取上一篇下一篇文章信息，jrInfo必须，callback可选，将回传上一篇下一篇的json格式信息：
            <pre>
            <code>
prev{file:'file',date:'date',title:'title'}
next{file:'file',date:'date',title:'title'}
            </code>
         </pre>
         </td>
      </tr>
      <tr>
         <td>backToChannel(jrInfo,callback(href))</td>
         <td>获取返回列表链接，jrInfo必须，callback可选，将回传当前栏目列表链接href</td>
      </tr>
   </table>
   <pre>
         <code>
/**
 * detail
 */

define(function(require) {
   var $ = require('jquery');      
   var helper=require('helper');
   
   if(typeof(jrInfo)==='object'){
      /*
      * 浏览次数
      */ 
      helper.ViewCount(jrInfo,function(count){
         $('#viewCountId').text(count);
         });
      /*
      *上一条下一条
      */
      helper.getInforPN(jrInfo,function(prev,next){
         $('#prev').find('a').text(prev.title).attr('href',prev.file).end().find('.date').text(prev.date);
         $('#next').find('a').text(next.title).attr('href',next.file).end().find('.date').text(next.date);
         });
      /*
      * 返回列表
      */
      helper.backToChannel(jrInfo,function(href){
         $('#b2l').attr('href',href);
         });
         
   }
   
})
         </code>
      </pre>
   <p> 其他页面的js尚未完成封装，详细页目前的封装方式也有待改进，最终每个页面只会发起一次ajax，传入参数串，程序返回以每个参数为键名的json。 </p>
   <h4>栏目当前状态</h4>
   <p> 程序在每个页面顶部输出当前栏目的层级信息，例如jrChannel="1#3",代表第2个一级频道下的第4个二级频道，js中将以如下形式应用到效果中： </p>
   <pre>
      <code>
//模板顶部输出
var jrChannel="1#3";
//页面中使用
var jrChannelArr=jrChannel.split('#');
$('.nav').children('li').eq(jrChannelArr[0]).addClass('cur').find('li').eq(jrChannelArr[1]).addClass('cur');
      </code>
   </pre>
   <h3 id="js-base">base层</h3>
   <p>base层提供基础常用工具，以jquery为主，base.js和common.js做补充，其中base.js提供需求相对稳定的方法，作为一个模块置于modules/内；common.js即是公用js，也内置了常用工具方法合集，使用时应根据实际需求保留或删除部分方法。</p>
   <p>base.js API:</p>
   <table class="table table-bordered">
      <tr>
         <td>base.ie6</td>
         <td>判断浏览器是否ie6，无参数，返回布尔值</td>
      </tr>
      <tr>
         <td>base.ie7</td>
         <td>判断浏览器是否ie7，无参数，返回布尔值</td>
      </tr>
      <tr>
         <td>base.ie8</td>
         <td>判断浏览器是否ie8，无参数，返回布尔值</td>
      </tr>
      <tr>
         <td>base.getStyle(ele,attr)</td>
         <td>获取元素的属性值，ele：元素；attr：要获取的属性，返回属性值</td>
      </tr>
      <tr>
         <td>$.cookie(name,value)</td>
         <td>操作cookie，name：键名；value：设置为的值，一个参数取值，返回value，两个参数赋值，无返回值</td>
      </tr>
      <tr>
         <td>$.storage(name,value,usecookie)</td>
         <td>html5本地存储，用法同$.cookie，usecookie控制是否对不支持localstorage的浏览器用cookie代替，缺省为true，即使用cookie</td>
      </tr>
      <tr>
      	<td>base.toload(url, param, pageSize, dom, callback)</td>
      	<td>通用异步加载方法，url：请求地址(string)；param：参数(object)；pageSize：请求条数(number)；dom：装载元素(jquery)；callback：回调(function)<br>
        1，param用于传递栏目信息相关参数，会与默认参数合并后一起发送给处理页，不得有"page"和"size"键，否则会覆盖默认参数中的相关键值，如<pre>
        <code>
        base.toload('/xxx/todo.jsp', {"channel":"001"}, 5, "#demoNews", function(){ alert('ok') })
        </code>
        </pre>
        2，处理页接收的参数为
        <pre>
        	<code>
            {
            	"channel":"001",
                "page":0	//此处计算并发送请求成功的次数作为pageNumber
                "size":5
            }
            </code>
        </pre>
        </td>
      </tr>
      <tr>
      	<td>适配方法</td>
        <td>
        	多终端适配方法，详见<a href="#response-func">【适配方法】</a>
        </td>
      </tr>
      <tr>
        <td>base.throttle(fn, delay)</td>
        <td>
          <p>函数节流，用于控制resize，mousemove，scroll这类频繁触发事件的触发次数</p>
          <p>原理是一定间隔(delay)内重复触发的事件将只执行最后一次，默认间隔是100ms</p>
          <pre>
            <code>
// 缩放浏览器窗口，只会在停止缩放后触发一次console
$(window).resize(function(){
  base.throttle(function(){
    console.log('resize')
  })
})
            </code>
          </pre>
        </td>
      </tr>
   </table>
   <p>common.js 内置工具列表:</p>
   <table class="table table-bordered">
      <tr>
         <td>返回顶部</td>
         <td>
         	对$('.gotop')添加点击返回顶部事件
         </td>
      </tr>
      <tr>
         <td>关闭当前页</td>
         <td>
         	对$('.closewin')绑定点击关闭当前页事件
         </td>
      </tr>
		<tr>
         <td>打印当前页</td>
         <td>
         	对$('.print')绑定打印当前页事件
         </td>
      </tr>
      <tr>
         <td>加入收藏</td>
         <td>
         	对$('.favorite')绑定点击将当前页加入收藏夹事件(仅IE)
         </td>
      </tr>
      <tr>
         <td>设为首页</td>
         <td>
         	对$('.sethome')绑定点击将当前页设为首页事件(仅IE)
         </td>
      </tr>
      <tr>
         <td>字号调节</td>
         <td>
         	字号调节需要一系列的dom结构：
            <pre>
            	<code>
&lt;!--字号调节器--&gt;
&lt;div id=&quot;switcher&quot;&gt;
	&lt;a id=&quot;big&quot;&gt;&lt;/a&gt;
	&lt;a&gt;&lt;/a&gt;
	&lt;a id=&quot;small&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!--作用区域--&gt;
&lt;div class=&quot;myart&quot;&gt;
	文字内容，行高不能是绝对值，否则大字号会串行
&lt;/div&gt;
               </code>
            </pre>
         </td>
      </tr>
      <tr>
         <td>模拟placeholder</td>
         <td>
         	对不支持H5 placeholder的浏览器模拟placeholder效果，作用于所有$('input.placeholder')：
            <pre>
            	<code>
               	&lt;input type=&quot;text&quot; class=&quot;placeholder&quot; placeholder=&quot;搜索&quot; &gt;
               </code>
            </pre>
         </td>
      </tr>
      <tr>
      	<td>textarea限制字数</td>
      	<td>
         	对textarea标签添加data-max属性将具有最大输入字符数限制：
            <pre>
            	<code>
               	&lt;textarea data-max='200'&gt;text here...&lt;/textarea&gt;
               </code>
            </pre>
         </td>
      </tr>
      <tr>
      	<td>预置按需渲染策略</td>
      	<td>
         	预置四种渲染标记："PcPush","UnpcPush","MobilePush","UnmobilePush"<br>
            分别代表“只有Pc渲染”，“只有Pc不渲染”，“只有手机渲染”，“只有手机不渲染”<br>
            示例：<br>
            <pre>
            	<code>
   &lt;div class=&quot;demo PcPush&quot;&gt;
      &lt;textarea class=&quot;hide&quot;&gt;
         只在Pc显示
      &lt;/textarea&gt;
   &lt;/div&gt;
   
   &lt;div class=&quot;demo2 UnmobilePush&quot;&gt;
      &lt;textarea class=&quot;hide&quot;&gt;
         除了手机都显示
      &lt;/textarea&gt;
   &lt;/div&gt;
               </code>
            </pre>
            实现原理见<a href="#DemandRendering">【按需渲染】</a>。
         </td>
      </tr>
	</table>
</section>
<section class="wrap" id="respons">
   <h2>多终端开发</h2>
   <h3 id="respons-intro">组成及实现</h3>
   <p> 多终端功能包括三个部分：栅格系统、屏幕类型判断，响应图片。</p>
   <p> responsive.css提供栅格系统并管理多版本样式加载。响应式网站的每一个显示版本都有一个对应的样式文件，分别是style.css、pad.css、mobile.css，其中style.css既是Pc版样式也是另外两个版本的基础样式，同普通实现方式一样，该样式会在每个页面头部引用，包含样式重置、自定义样式库、及默认(Pc)状态下的全站样式，pad.css和mobile.css分别是中屏叠加样式和小屏叠加样式，他们会由responsive.css根据设定的响应宽度适时@import引入。 </p>
   <p> 这种样式组织方式有两个弊端：一，多版本样式组织采用的是pc优先原则而非响应式开发提倡的移动优先原则，会给移动端带来相对多的加载压力；二、每个版本一个独立样式文件通过@import载入相比单文件组织所有样式会增加两次请求。 </p>
   <p> 最终采用这种方式是分别考虑到：一、响应式网站首先是一个网站然后才是响应式网站，为保证框架的通用性必须优先满足pc端ie6、7、8的兼容要求和可能发生的去响应式要求，因此只能pc优先；二、每个版本一个样式文件是为了简化使用，如果在style.css里管理所有版本的样式除了样式庞杂不便管理外，还需要手动定义个版本的临界尺寸，而这个尺寸会在responsive.less中再配置一次，为简化配置所以将多版本样式拆分并通过responsive.css引入，使用时只配置一次response.less并编译得到的responsive.css，多版本样式加载、判断屏幕类型、图片响应都会通过这一次配置实现。 </p>
   <p>base.js对外提供getType()方法和图片响应方法，getType()是被动方法，可以在js中获取屏幕类型，图片响应是主动方法，会自动识别需要响应的图片。详见<a href="#response-func">【适配方法】</a></p>
   <h3 id="respons-grid">
   栅格系统
   </h3>
   <p>基于栅格系统的【<a href="http://192.168.0.10:1003/" target="_blank">可视化布局工具</a>】</p>
   <h4>基础栅格</h4>
   <p>预览：</p>
   <div class="demo">
      <div class="row">
         <div class="span-4"></div>
         <div class="span-8"></div>
         <div class="span-4"></div>
      </div>
   </div>
   <p>代码：</p>
   <pre>
      <code>
         &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;span-8&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
         &lt;/div&gt;
      </code>
   </pre>
   <p>class列表：</p>
   <table class="table table-bordered">
      <tr>
         <td>.span-1</td>
         <td>1/总格数 宽度</td>
      </tr>
      <tr>
         <td>.span-2</td>
         <td>2/总格数 宽度</td>
      </tr>
      <tr>
         <td>.span-3</td>
         <td>3/总格数 宽度</td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
   </table>
   <h4>响应式栅格</h4>
   <p>预览：</p>
   <div class="demo">
      <div class="row">
         <div class="span-4 midd-8 smal-16"></div>
         <div class="span-8 midd-8 smal-16"></div>
         <div class="span-4 midd-16 smal-16"></div>
      </div>
   </div>
   <p>代码：</p>
   <pre>
      <code>
         &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;span-8 midd-8 smal-16&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;span-4 midd-16 smal-16&quot;&gt;&lt;/div&gt;
         &lt;/div&gt;
      </code>
   </pre>
   <p>class列表：</p>
   <table class="table table-bordered">
      <tr>
         <td>.midd-1</td>
         <td>1/总格数，中屏生效</td>
      </tr>
      <tr>
         <td>.midd-2</td>
         <td>2/总格数，中屏生效</td>
      </tr>
      <tr>
         <td>.midd-3</td>
         <td>3/总格数，中屏生效</td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
      <tr>
         <td>.smal-1</td>
         <td>1/总格数，小屏生效</td>
      </tr>
      <tr>
         <td>.smal-2</td>
         <td>2/总格数，小屏生效</td>
      </tr>
      <tr>
         <td>.smal-3</td>
         <td>3/总格数，小屏生效</td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
   </table>
   <h4>无间距模式</h4>
   <p>预览：</p>
   <div class="demo">
      <div class="full-row">
         <div class="span-4 midd-8 smal-16">无间距模式</div>
         <div class="span-8 midd-8 smal-16" style="background:grey;color:#fff;">无间距模式</div>
         <div class="span-4 midd-16 smal-16">无间距模式</div>
      </div>
   </div>
   <p>代码：</p>
   <pre>
      <code>
         &lt;div class=&quot;full-row&quot;&gt;
            &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;无间距模式&lt;/div&gt;
            &lt;div class=&quot;span-8 midd-8 smal-16&quot; style="background:grey;color:#fff;"&gt;无间距模式&lt;/div&gt;
            &lt;div class=&quot;span-4 midd-16 smal-16&quot;&gt;无间距模式&lt;/div&gt;
         &lt;/div&gt;
      </code>
   </pre>
   <h4>栅格辅助工具</h4>
   <p>预览：</p>
   <div class="demo">
      <div class="row">
         <div class="span-8 center">
            <p>block1</p>
            居中 </div>
      </div>
      <div class="row">
         <div class="span-12 pull-right smal-16">
            <p>block1</p>
            置右 </div>
         <div class="span-4 smal-16">
            <p>block2</p>
         </div>
      </div>
      <div class="row">
         <div class="span-8 pull-right-4 smal-16">
            <p>block1</p>
            右位移 </div>
         <div class="span-4 pull-left-8 smal-16">
            <p>block2</p>
            左位移 </div>
         <div class="span-4 smal-16">
            <p>block3</p>
         </div>
      </div>
      <div class="row">
         <div class="span-8 smal-16">
            <p>block1</p>
         </div>
         <div class="span-4 smal-16 midd-hide smal-show">
            <p>block2</p>
            中屏隐藏，小屏显示 </div>
         <div class="span-4 smal-16 smal-hide">
            <p>block3</p>
            小屏隐藏 </div>
      </div>
   </div>
   <p>代码：</p>
   <pre>
      <code>
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;span-8 center&quot;&gt;&lt;p&gt;block1&lt;/p&gt;居中&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;span-12 pull-right smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;置右&lt;/div&gt;
         &lt;div class=&quot;span-4 smal-16&quot;&gt;&lt;p&gt;block2&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;span-8 pull-right-4 smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;右位移&lt;/div&gt;
         &lt;div class=&quot;span-4 pull-left-8 smal-16&quot;&gt;&lt;p&gt;block2&lt;/p&gt;左位移&lt;/div&gt;
         &lt;div class=&quot;span-4 smal-16&quot;&gt;&lt;p&gt;block3&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;span-8 smal-16&quot;&gt;&lt;p&gt;block1&lt;/p&gt;&lt;/div&gt;
         &lt;div class=&quot;span-4 smal-16 midd-hide smal-show&quot;&gt;&lt;p&gt;block2&lt;/p&gt;中屏隐藏，小屏显示&lt;/div&gt;
         &lt;div class=&quot;span-4 smal-16 smal-hide&quot;&gt;&lt;p&gt;block3&lt;/p&gt;小屏隐藏&lt;/div&gt;
      &lt;/div&gt;
      </code>
   </pre>
   <p>class列表：</p>
   <table class="table table-bordered">
      <tr>
         <td>.center</td>
         <td>居中,居中的栅格将成为块级元素占据整行，不能多列栅格共存</td>
      </tr>
      <tr>
         <td>.midd-center</td>
         <td>中屏居中</td>
      </tr>
      <tr>
         <td>.smal-center</td>
         <td>小屏居中</td>
      </tr>
      <tr>
         <td>.hide</td>
         <td>大屏隐藏</td>
      </tr>
      <tr>
         <td>.midd-hide</td>
         <td>中屏隐藏</td>
      </tr>
      <tr>
         <td>.smal-hide</td>
         <td>小屏隐藏</td>
      </tr>
      <tr>
         <td>.smal-show</td>
         <td>小屏显示，用于显示中屏隐藏的元素</td>
      </tr>
      <tr>
         <td>.pull-right</td>
         <td>置右，置右和位移工具的设计使用场景是，在非小屏下调整dom顺序，以在小屏下全宽显示时有正确的前后(上下)关系</td>
      </tr>
      <tr>
         <td>.pull-left-1</td>
         <td> 左位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-left-2</td>
         <td> 左位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-left-3</td>
         <td> 左位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
      <tr>
         <td>.pull-right-1</td>
         <td> 右位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-right-2</td>
         <td> 右位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>.pull-right-3</td>
         <td> 右位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
      </tr>
      <tr>
         <td>...</td>
         <td></td>
      </tr>
   </table>
   <h4>栅格的嵌套</h4>
   <p>row嵌套full-row，最多间隔嵌套到第三层，同属性栅格无限嵌套</p>
   <div class="demo">
      <div class="row">
         <div class="span-8">
            <p>block-1</p>
            <div class="full-row">
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-1-1</p>
                  <div class="row">
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-1-1-1</p>
                        <div class="full-row">
                           <div class="span-8" style="color:#333;margin-bottom:0;">
                              <p>block-1-1-1</p>
                           </div>
                           <div class="span-8" style="color:#333;margin-bottom:0;">
                              <p>block-1-1-2</p>
                           </div>
                        </div>
                     </div>
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-1-1-2</p>
                     </div>
                  </div>
               </div>
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-1-2</p>
               </div>
            </div>
         </div>
         <div class="span-8">
            <p>block-2</p>
            <div class="full-row">
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-2-1</p>
                  <div class="full-row">
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-2-1-1</p>
                        <div class="full-row">
                           <div class="span-8" style="color:#333;margin-bottom:0;">
                              <p>block-2-1-1-1</p>
                           </div>
                           <div class="span-8" style="color:#333;margin-bottom:0;background:#ddd;">
                              <p>block-2-1-1-2</p>
                           </div>
                        </div>
                     </div>
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-2-1-2</p>
                     </div>
                  </div>
               </div>
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-2-2</p>
               </div>
            </div>
         </div>
      </div>
   </div>
   <p>full-row嵌套row，最多间隔嵌套到第二层，同属性栅格无限嵌套</p>
   <div class="demo">
      <div class="full-row">
         <div class="span-8">
            <p>block-1</p>
            <div class="row">
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-1-1</p>
                  <div class="full-row">
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-1-1-1</p>
                     </div>
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-1-1-2</p>
                     </div>
                  </div>
               </div>
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-1-2</p>
               </div>
            </div>
         </div>
         <div class="span-8">
            <p>block-2</p>
            <div class="row">
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-2-1</p>
                  <div class="row">
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-2-1-1</p>
                        <div class="row">
                           <div class="span-8" style="color:#333;margin-bottom:0;background:#ddd;">
                              <p>block-2-1-1-1</p>
                           </div>
                           <div class="span-8" style="color:#333;margin-bottom:0;background:#ddd;">
                              <p>block-2-1-1-2</p>
                           </div>
                        </div>
                     </div>
                     <div class="span-8" style="background:orange;margin-bottom:0;">
                        <p>block-2-1-2</p>
                     </div>
                  </div>
               </div>
               <div class="span-8" style="background:grey;color:#fff;margin-bottom:0;">
                  <p>block-2-2</p>
               </div>
            </div>
         </div>
      </div>
   </div>
   <h4>基于less配置栅格</h4>
   <p> responsive.less位于 项目目录/lib/下，配置网格总数和间距将生成不同的栅格，目前最多支持24列；配置临界尺寸将影响Pad.css和Mobile.css加载的时机，该值也是getType()方法返回值的依据。配置项如下： </p>
   <table class="table table-bordered">
      <tr>
         <td>@gridColumns</td>
         <td>栅格列数,正整数，默认16</td>
      </tr>
      <tr>
         <td>@gridGutterWidth</td>
         <td>栅格间距，表示百分比的小数，默认0.02，表示2%</td>
      </tr>
      <tr>
         <td>@PadScreen</td>
         <td>中屏临界宽度，css宽度，默认64em</td>
      </tr>
      <tr>
         <td>@MobileScreen</td>
         <td>小屏临界宽度，css宽度，默认40em</td>
      </tr>
   </table>
   <p>responsive.less代码如下：</p>
   <pre>
      <code>
         /*
         * Grid System
         */
         
         //配置项
         
         @gridColumns: 16;       //网格数
         @gridGutterWidth: 0.02; //网格间距
         @PadScreen: 64em;       //Pad临界尺寸
         @MobileScreen: 40em;    //Mobile临界尺寸
         
         
         //适配样式
         @import url(../css/Pad.css) screen and (max-width: @PadScreen);
         @import url(../css/Mobile.css) screen and (max-width: @MobileScreen);
         
         //标识
         body:after{visibility: hidden;content: 'Pc';}
         
         //栅格
         ...
      </code>
   </pre>
   <h3 id="response-func">适配方法</h3>
   <p>多终端适配方法，由<a href="#js-base">【base.js】</a>提供：</p>
   <table class="table table-bordered">
      <tr>
         <td>getType(callback)</td>
         <td>
         <p>获取当前屏幕类型，回调函数可选，当无回调时返回字符串('Pc','Pad','Mobile')，有回调时回调接受返回字符串为参数：</p>
         <pre>
         	<code>
   var base=require('base');
   
   //无回调
   var _type=base.getType();      //"Pc" || "Pad" || "Mobile"
   
   //有回调
   base.getType(function(type){
      alert(type);                //"Pc" || "Pad" || "Mobile"
   })
   
            </code>
         </pre>
         </td>
      </tr>
      <tr>
      	<td>getOrient(callback)</td>
        <td>
        	<p>获取移动设备屏幕方向，回调函数可选，当无回调时返回字符串('Heng','Shu')，有回调时回调接受返回字符串为参数：</p>
            <pre>
            	<code>
   var base=require('base');
   
   //无回调
   var _orient=base.getOrient();	// "Heng" || "Shu"
   
   //有回调
   base.getOrient(function(orient){
      alert(orient);				// "Heng" || "Shu"
   })
                </code>
            </pre>
            <p>默认会监听设备横竖屏切换事件，给body添加对应class名，源码：</p>
            <pre>
            	<code>
	$( window ).bind("orientationchange", function( event ) { 
		$('body').removeClass('Heng Shu').addClass(_getOrient())
	}); 
    			</code>
            </pre>
        </td>
      </tr>
      <tr>
         <td>图片适配</td>
         <td> 
         <p>全局方法，会对所有带"data-src"属性的图片做适配，src是手机端图片地址，"data-src"是pc和pad端图片地址，非手机端访问时会将src改成data-src中的地址。</p>
         <p>如下，大图地址是real.jpg，小图地址是small/real.jpg</p>
         <pre>
         	<code>
	&lt;img src=&quot;small.jpg&quot; data-src=&quot;big.jpg&quot; /&gt; 
         	</code>
         </pre>
         </td>
      </tr>
   </table>

</section>
<section class="wrap" id="mobileDev">
   <h2>移动开发</h2>
   <h3 id="overall-feature">默认特性</h3>
   <p> 页面模板("web/index.htm")默认禁用触屏缩放，禁用ios/safari识别网页中的电话号码，支持ios/safari添加到主屏，主屏图标"web/img/apple-touch-icon.png"，启动画面"web/img/screen.png"，从桌面启动默认隐藏地址栏；对ie9以下浏览器添加js支持html5标签；对ie6添加js修复png透明，默认将修复s标签、i标签、.pngfix及.pngfix内的img标签； </p>
   <p> 基础样式("web/css/style.css") 默认包含样式重置；包括chrome和ie10滚动条美化、html5标签初始块化、常用原子类库、5x5-ico-spirit样、flex栅格;其中".wrap"s是默认包装元素，使用最大宽度(max-width)实现页面响应，非响应式网站要将max-width改为width； </p>
   <p> 中屏样式("web/css/pad.css") 默认给包装元素(".wrap")增加左右padding各20px。 </p>
   <p> 栅格系统("web/lib/responsive.css")支持定义12到24栅格数和栅格间距(通过less)，包括常用栅格工具集，详见<a href="#respons-grid">【栅格系统】</a>。</p>
	<h3 id="flex布局">flex栅格</h3>
   <p>移动端适合使用flex布局，基础样式("web/css/style.css") 中已包含简易的flex栅格系统，沿用流式栅格系统的命名风格，解决了flex三代规范演变带来的兼容问题，如下：</p>
   <table class="table table-bordered">
   	<tr>
      	<td>.flex-col</td>
      	<td>定义一个纵向flex容器。</td>
      </tr>
   	<tr>
      	<td>.flex-row</td>
      	<td>定义一个横向flex容器。</td>
      </tr>
   	<tr>
      	<td>.flex-1， <br/>.flex-2， <br/>.flex-3， <br/>.flex-4</td>
      	<td>定义flex盒子的主轴尺寸占比。<br/>即，在纵向容器中控制高度，在横向容器中控制宽度，flex-n中的n代表的是，n/{(flex-n1)+(flex-n2)+...}。</td>
      </tr>
   	<tr>
      	<td>.align-stretch</td>
      	<td>flex盒子在侧轴方向伸展。</td>
      </tr>
   	<tr>
      	<td>.align-center</td>
      	<td>flex盒子在侧轴方向居中对齐。</td>
      </tr>
   	<tr>
      	<td>.justify-center</td>
      	<td>flex盒子在主轴方向居中对齐。</td>
      </tr>
   	<tr>
      	<td>.flex-wrap</td>
      	<td>允许flex盒子换行显示，默认不换行。</td>
      </tr>
      <tr>
        <td>.scroll_cont</td>
        <td>带滚动条区域</td>
      </tr>
	</table> 
   <p>预览：</p>
   <div class="flex-col" style="height:480px;width:320px;">
      <div class="header flex-1" style="background:orange;color:#fff;">
         头部
      </div>
      <div class="body flex-4" style="background:#FFF6E5;">
         内容
      </div>
      <div class="foot flex-1" style="background:grey;color:#fff;">
         底部
      </div>
   </div>
	<p>代码：</p>
   <pre>
   	<pre>
      	<code>
	&lt;div class=&quot;flex-col&quot; style=&quot;height:480px;width:320px;&quot;&gt;
		&lt;div class=&quot;header flex-1&quot; style=&quot;background:orange;color:#fff;&quot;&gt;
			头部
		&lt;/div&gt;
		&lt;div class=&quot;body flex-4&quot; style=&quot;background:#FFF6E5;&quot;&gt;
			内容
		&lt;/div&gt;
		&lt;div class=&quot;foot flex-1&quot; style=&quot;background:grey;color:#fff;&quot;&gt;
			底部
		&lt;/div&gt;
	&lt;/div&gt;
         </code>
      </pre>
   </pre>
</section>
<section class="wrap" id="patch">
   <h2>辅助工具</h2>
   <h3 id="HideBeforeReady">延迟显示</h3> 
   <p>透明隐藏类 ：".opc0"，将元素透明以隐藏，documentReady后显示，用于隐藏局部或整个页面的渲染过程</p>
   <pre>
      <code>

//该方法在common.js中的实现

$(function(){
　　　　$('.opc0').animate({'opacity':'1'},'fast')
});
      </code>
   </pre>
	<h3 id="DemandRendering">按需渲染</h3>
   <p>base.topush(dom,callback)，用于显示textarea标签暂存的html或发起Ajax，以减少不需要加载即显示的元素对页面加载性能的影响。</p>
   <p>方法可以接受两个参数，@param(dom,callback)：指定渲染的元素，渲染后执行的回调方法。</p>
   <p>两个参数均为可选，dom默认值".topush"，callback默认无。</p>
   <p>加载元素后dom会添加‘pushed’类。</p>
   <pre>
      <code>
   &lt;!--textarea暂存不需要立刻显示的元素--&gt;
   &lt;div class=&quot;demo topush&quot;&gt;
      &lt;textarea class=&quot;hide&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;list item&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;list item&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;list item&lt;/a&gt;
      &lt;/textarea&gt;
   &lt;/div&gt;
      </code>
      <code>
   &lt;!--发起Ajax--&gt;
   &lt;div class=&quot;demo topush&quot;&gt;
      &lt;textarea class=&quot;hide&quot; data-url=&quot;/test/ajax.htm&quot;&gt; &lt;/textarea&gt;
   &lt;/div&gt;
      </code>
  </pre>
  <pre>
      <code>
   var base=require('base');
   
   //无参数，显示所有".topush"中的textarea暂存元素
   base.topush();  
   
   //传入回调函数，显示".topush"暂存元素并执行回调，回调函数接受当前元素为参数                    
   base.topush(function(THISDOM){           
      console.log(THISDOM.attr('class'))	//"topush ..."
   });
   
   //传入目标选择器会显示选择器元素中的textarea暂存的元素                   
   base.topush('.demo');
   
   //传入两个参数时，第一个参数指定要处理的元素，第二个参数为回调函数
   base.topush('.demo',function(THISDOM){    
      console.log(THISDOM.html())	//.demo 渲染后的html
   });     
      </code>
   </pre>
   <p>框架内置了基于base.topush()方法的按需渲染策略，详见<a href="#js-base">【common.js 内置工具列表】</a>。</p>
   
	<h3 id="preload">预加载</h3>
   <p>预加载模块，暂缺</p>
   
</section>

<footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
      <figure></figure>
      </a>
      <p class="dib"> © 2014 - 3014  zangtao@21-sun.com<br>
      Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
   </div>
</footer>
</body>
<script src="/resources/modules/seajs/sea.js" id="seajs-node"></script>
<script src="/resources/Doc/seajs.config.js"></script>
<script>
	seajs.use('/resources/Doc/resets/doc')
</script>
</html>